<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>消息-最share</title>-->
<!--    <link rel="stylesheet" th:href="@{/chat/layui/css/layui.css}" type="text/css">-->
<!--    <link rel="stylesheet" th:href="@{/chat/css/base.css}" type="text/css">-->
<!--    <link rel="stylesheet" th:href="@{/chat/css/chats.css}" type="text/css">-->
<!--</head>-->
<div layout:fragment="content">
    <div class="med_tittle_section">
        <div class="med_img_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="med_tittle_cont_wrapper">
                        <div class="med_tittle_cont">
                            <ol class="breadcrumb">
                                <li><a th:href="@{/}">系统首页</a></li>
                                <li>消息中心</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container" style="background-color: lavender;">
        <div class="container">
            <div class="row med_bottompadder50">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <li style="font-size: x-large;margin-top: 20px;margin-bottom: 20px;">
                        <a th:href="@{/chat}" style="color: #839d85;">消息列表</a>
                    </li>
                    <div class="lyear-layout-sidebar-scroll">
                        <nav class="sidebar-main">
                            <ul class="nav nav-drawer">
                                <li class="nav-item" style="display: block;padding-top: 5px;padding-bottom: 5px;background-color: white;font-size: 18px;border-bottom: #8fafe4 1px solid;border-left: 3px solid #4cae4c;">
                                    <a th:href="@{/chat}" style="color: #4cae4c;">
                                        <i class="iconfont icon-home"></i>我的聊天</a>
                                </li>
                                <li class="nav-item" style="display: block;padding-top: 5px;padding-bottom: 5px;background-color: #4cae4c;font-size: 18px;border-bottom: #8fafe4 1px solid;">
                                    <a th:href="@{/auditResult}" style="color: #ffffff;">
                                        <i class="iconfont icon-home"></i>我的通知</a>
                                </li>
                                <li class="nav-item" style="display: block;padding-top: 5px;padding-bottom: 5px;background-color: #4cae4c;font-size: 18px;border-bottom: #8fafe4 1px solid;">
                                    <a th:href="@{/information/mypush}" style="color: #ffffff;">
                                        <i class="iconfont icon-home"></i>我的发布</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                    <div class="box" id="chat">
                        <!-- 聊天列表 -->
                        <div class="chat-list">
                            <!-- 顶部个人信息部分 -->
                            <div class="header" id="showInfo" style="display: block">
                                <div class="pic2">
                                    <img th:src="@{/images/U_me.jpg}" alt="">
                                </div>
                                <span th:text="${fromName}"></span>
                                <div class="search-friends" onclick="showSearch()"></div>
                            </div>
                            <!-- 巨大的搜索框 -->
                            <div class="search-input" id="showSearch" style="display: none">
                                <img th:src="@{/images/search.png}" class="search-input-img" alt="">
                                <input type="text" onmouseleave="closeSearch()">
                            </div>

                            <!-- 聊天列表 -->
                            <div class="friends">
                                <ul id="friendList">
                                    <li th:each="chatListDTO:${chatListDTOList}"
                                        th:class="${chatListDTO.toName == toName} ? 'current2' : ''"
                                    >
                                        <div class="friend-pic">
                                            <span th:if="${chatListDTO.unread != 0}" th:text="${chatListDTO.unread}"></span>
                                            <a th:href="@{/intoChat(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                <img th:src="@{/images/U_hr.jpg}" alt="">
                                            </a>
                                        </div>
                                        <a th:href="@{/intoChat(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                            <i class="name" th:text="${chatListDTO.toName}" style="font-style: normal;"></i>
                                        </a>
                                        <a th:href="@{/intoChat(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                            <i class="shortcut" th:text="${chatListDTO.lastMessage}" style="font-style: normal;"></i>
                                        </a>

                                        <div class="time" th:text="${chatListDTO.sendTime}"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- 聊天框 -->
                        <div class="chat-content">
                            <!--        <div class="unread" v-show="hasUnread">-->
                            <!--            <span @click='scrollBottom'>&nbsp;&nbsp;↓↓ 有新消息未读&nbsp;&nbsp;|</span>-->
                            <!--            <span @click='hideUnreadBtn'>&nbsp;×&nbsp;</span>-->
                            <!--        </div>-->
                            <div class="firend-name" th:text="${toName}"></div>
                            <div class="chat-middle" id="chatContainer"
                                 @scroll='scrollHistory($event)'>
                                <div class="content" id="ulName">
                                    <ul th:if="${toName != ''}" th:each="chatMessage:${chatMessageDTOList}">
                                        <li th:if="${chatMessage.sendUser==fromName && chatMessage.content!=''} " class="me">
                                            <div class="image-me">
                                                <img th:src="@{/images/U_me.jpg}" alt=" ">
                                            </div>
                                            <span>
                                                <div th:text="${chatMessage.content}"></div>
                                                <div class="line"></div>
                                                <div class="sendTime" th:text="${chatMessage.sendTime}"></div>
                                            </span>
                                        </li>
                                        <li th:if="${chatMessage.sendUser!=fromName && chatMessage.content!=''}"} class="you">
                                            <div class="image-friend">
                                                <img th:src="@{/images/U_hr.jpg}" alt=" ">
                                            </div>
                                            <span>
                                                <div th:text="${chatMessage.content}"></div>
                                                <div class="line"></div>
                                                <div class="sendTime" th:text="${chatMessage.sendTime}"></div>
                                            </span>
                                        </li>
                                    </ul>
                                    <!--                <div class="chatMsg">-->
                                    <!--                </div>-->
                                </div>
                            </div>
                            <!-- 当没有选中朋友时 输入框不能输入东西 其他也都不能点击 -->
                            <!--        <div v-if="currentFriendName == ''" class="chat-bottom">-->
                            <!--            <textarea ref="messageInput" cols="30" rows="10" placeholder="请输入要发送的消息..." id="chat-bar" v-model="msgContent" disabled></textarea>-->
                            <!--            <a href="javascript:;" class="chat-faces">-->
                            <!--                <img src="images/faces.png " alt=" ">-->
                            <!--            </a>-->
                            <!--            <a href="javascript:;" class="chat-img">-->
                            <!--                <img src="images/photo.png" alt=" ">-->
                            <!--            </a>-->
                            <!--            <button class="chat-send" @click='websocketSend' disabled>发送</button>-->
                            <!--        </div>-->
                            <div th:if="${toName != ''}" class="chat-bottom">
                                <textarea cols="30" rows="10" placeholder="请输入要发送的消息..."
                                          id="messageInput"></textarea>
                                <!--            <a href="# " class="chat-faces">-->
                                <!--                <img src="images/faces.png " alt=" ">-->
                                <!--            </a>-->
                                <!--            <a href="# " class="chat-img">-->
                                <!--                <img src="images/photo.png" alt=" ">-->
                                <!--            </a>-->
                                <button class="chat-send" onclick="send()" id="sendId" th:attr="linkId = ${linkId}, toName = ${toName}, toId = ${toId}, fromId = ${fromId}, fromName = ${fromName}">发送</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--<script th:src="@{/chat/js/jquery.min.js}"></script>-->
<!--<script th:src="@{/chat/js/vue.min.js}"></script>-->
<!--<script th:src="@{/chat/js/axios.js}"></script>-->
<script th:src="@{/chat/layui/layui.all.js}"></script>
<!--<script th:src="@{/chat/js/page/isLogin.js}"></script>-->
<!--<script th:src="@{/chat/js/page/nav.js}"></script>-->
<!--<script th:src="@{/chat/js/page/chat.js}"></script>-->
<script th:src="@{/js/jquery_min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wow.min.js}"></script>
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
<script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:inline="javascript">
    window.onload = function(){
    // document.getElementById('chatContainer').onload = function(){
        const textarea = document.getElementById('chatContainer');
        textarea.scrollTop = textarea.scrollHeight;

    }
    var websocket = null;
    // var target = "ws://172.20.64.253:8081/ws/";
    var target = "ws://localhost:8080/platform/websocket";
    //这里需要的路径需要配置相对应的路径
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket(target);

    } else {
        window.alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("error");
    };
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        console.log("Loc MSG: 建立连接");
        $.ajax({
            url: '/platform/information/updateWindow?linkId='+$("#sendId").attr("linkId") + "&id=" + $("#sendId").attr("fromId"),
            type: 'put',
            success: function (result) {
                if (result.code === 100) {
                    console.log('更改在线消息成功');
                } else {
                    console.log('更改在线消息失败！');
                }
            }
        })
    };
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        // window.alert("收到信息");
        console.log("收到消息");

        setTimeout(function () {


            var topDiv = document.getElementById("ulName");
            var ul = document.createElement("ul");
            var newLi = document.createElement("li");
            var div = document.createElement("div");
            var span = document.createElement("span");
            var chatMessage = JSON.parse(event.data);
            console.log(chatMessage.sendTime);
            if (chatMessage.sendUser==$("#sendId").attr("fromName") && chatMessage.content!=''){
                var div1 = document.createElement("div");
                var div2 = document.createElement("div");
                var div3 = document.createElement("div");
                div1.innerHTML = chatMessage.content;
                div2.className = "line";
                // div3.innerHTML = chatMessage.sendTime;
                div3.innerText = chatMessage.sendTime;
                div3.className = "sendTime";
                newLi.className = "me";
                span.appendChild(div1);
                span.appendChild(div2);
                span.appendChild(div3);

                var img = document.createElement("img");
                div.className = "image-me";
                img.setAttribute("src", "../platform/images/U_me.jpg");
                div.appendChild(img);
                newLi.appendChild(div);
                newLi.appendChild(span);
                ul.appendChild(newLi);
                topDiv.appendChild(ul);
                $("#messageInput").val('');
            }else if(chatMessage.sendUser==$("#sendId").attr("toName") && chatMessage.content!=''){
            // }else if(chatMessage.sendUser!=$("#sendId").attr("fromName") && chatMessage.content!=''){
                var div1 = document.createElement("div");
                var div2 = document.createElement("div");
                var div3 = document.createElement("div");
                div1.innerHTML = chatMessage.content;
                div2.className = "line";
                // div3.innerHTML = chatMessage.sendTime;
                div3.innerText = chatMessage.sendTime;
                div3.className = "sendTime";
                newLi.className = "you";
                span.appendChild(div1);
                span.appendChild(div2);
                span.appendChild(div3);

                var img = document.createElement("img");
                div.className = "image-friend";
                img.setAttribute("src", "../platform/images/U_hr.jpg");
                div.appendChild(img);
                newLi.appendChild(div);
                newLi.appendChild(span);
                ul.appendChild(newLi);
                topDiv.appendChild(ul);
            }
            const textarea = document.getElementById('chatContainer');
            textarea.scrollTop = textarea.scrollHeight;


            // location.href = "/platform/intoChat?linkId="+$("#sendId").attr("linkId") + "&toName=" + $("#sendId").attr("toName");
        }, 50);
    };
    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("Loc MSG:关闭连接");
        $.ajax({
            url: '/platform/information/closeWindow?linkId='+$("#sendId").attr("linkId") + "&id=" + $("#sendId").attr("fromId"),
            type: 'put',
            success: function (result) {
                if (result.code === 100) {
                    window.alert('更改离线消息成功');
                } else {
                    window.alert('更改离线消息失败！');
                }
            }
        })
    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    };
    window.onunload = function (){
        websocket.close();
    };

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        //获取输入的文本信息进行发送
        var message = $('#messageInput').val();
        var linkId = $("#sendId").attr("linkId");
        var toId = $("#sendId").attr("toId");
        var chatMsg = {content: message, toId: toId};

        websocket.send(JSON.stringify(chatMsg));
        // setTimeout(function () {
        //     location.href = "/platform/intoChat?linkId="+$("#sendId").attr("linkId") + "&toName=" + $("#sendId").attr("toName");
        // }, 1000);
    }

    function showSearch(){
        var showInfo = document.getElementById("showInfo");
        var showSearch = document.getElementById("showSearch");
        showInfo.style.display = "none";
        showSearch.style.display = "block";
    }
    function closeSearch(){
        var showInfo = document.getElementById("showInfo");
        var showSearch = document.getElementById("showSearch");
        showInfo.style.display = "block";
        showSearch.style.display = "none";
    }

</script>
</div>>
</html>